<template>
    <view>
        <view style="position: relative;">
			<swiper-banner :data="resSwiperData" height="66.67" @click="swiperBannerClick"></swiper-banner>
		</view>
		<grid-scorll :data="gridData" @click="gridScorllClick"></grid-scorll>
        <view class="scrollContent">
            <view class="imgBanner--card" @tap="cardClick(cardBanner.link)">
                <image class="imgBanner__img" :src="cardBanner.imgUrl" mode="aspectFill"></image>
            </view>
            <!-- 推荐 -->
            <block v-for="(item, index) in data" :key="index">
                <view class="uni-card card">
                    <view class="uni-card-header" @tap="cardClick(item.link)">
                        <view class="uni-h4 flex__row--center">
                            {{item.title}}
                            <uni-icon size="24" type="arrowright" color="#777"></uni-icon>
                        </view>
                        <view class="uni-h6 flex__row--center" v-if="item.type=='time'">
                            离本场结束
                            <uni-countdown fontColor="#FFFFFF" borderColor="#07bc91" bgrColor="#07bc91" :timer="item.helper"></uni-countdown>
                        </view>
                        <text class="card__header--hot" v-if="item.type=='hot'">{{item.helper}}</text>
                        <text class="card__header--sub" v-if="item.type=='sub'">{{item.helper}}</text>
                    </view>
                    <template v-if="item.type == 'scroll'">
                        <view class="uni-card-content">
                            <scroll-view class="scrollH" scroll-x>
                                <view class="scrollH__main">
                                    <block v-for="(itemGood, indexGood) in item.good" :key="indexGood">
                                        <list-good type="row" width="30%" :data="itemGood" :index="[index, indexGood]" @click="_clickListGood" @change="_changeListGood">
                                            <!-- <view style="color: #007AFF;font-size: 20upx;">其他内容--{{ data.size }}</view> -->
                                        </list-good>
                                    </block>
                                </view>
                            </scroll-view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="uni-card-content">
                            <block v-for="(itemGood, indexGood) in item.good" :key="indexGood">
                                <list-good :data="itemGood" :index="[index, indexGood]" @click="_clickListGood" @change="_changeListGood">
                                    <!-- <view style="color: #007AFF;font-size: 20upx;">其他内容--{{ data.size }}</view> -->
                                </list-good>
                            </block>
                        </view>
                        <view class="card__footer" @tap="cardClick(item.link)">
                            查看全部
                            <uni-icon size="20" type="arrowright"></uni-icon>
                        </view>
                    </template>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
    import uniIcon from '@/components/uni-icon/uni-icon.vue';
    import uniCountdown from '@/components/uni-countdown.vue';
    import swiperBanner from '@/components/wlp-swiper-banner/wlp-swiper-banner.vue';
    import gridScorll from '@/components/wlp-grid-scorll/wlp-grid-scorll.vue';
    import listGood from '@/components/wlp-list-good/wlp-list-good.vue';
    import numboxShopping from '@/components/wlp-number-shopping/wlp-number-shopping.vue';

    import { toast } from '@/common/util.js';
    import { getHomeInfo, getBeeIndexInfo, getBossIndexInfo } from '@/service/getData.js';

    import { mapState, mapMutations } from 'vuex';

    export default {
        components: {
            swiperBanner,
            gridScorll,
            uniCountdown,
            uniIcon,
            listGood,
            numboxShopping
        },
        data() {
            return {
                swiperData: [
                    // swiper请求一次
                    {
                        imgUrl: '/static/img/loading.png',
                        link: '加载中...'
                    },
                    {
                        imgUrl: '/static/temp/swiper (1).jpg',
                        link: 'www.baidu.com'
                    },
                    {
                        imgUrl: '/static/temp/swiper (2).jpg',
                        link: 'www.taobao.com'
                    },
                    {
                        imgUrl: '/static/temp/swiper (3).jpg',
                        link: 'www.youdao.com'
                    }
                ],
                gridScrollLeft: 0,
                gridData: [
                    // 功能固定数据
                    {
                        imgUrl: '/static/temp/grid (1).jpeg',
                        title: '甜品饮品',
                        link: '/pages/user/login/login'
                    },
                    {
                        imgUrl: '/static/temp/grid (2).jpeg',
                        title: '商超便利',
                        link: '/pages/user/profile/profile'
                    },
                    {
                        imgUrl: '/static/temp/grid (3).jpeg',
                        title: '美食',
                        link: '/pages/shopping/shoppingCart/shoppingCart'
                    },
                    {
                        imgUrl: '/static/temp/grid (4).jpeg',
                        title: '简餐',
                        link: '/pages/tabBar/shoppingCart/shoppingCart'
                    },
                    {
                        imgUrl: '/static/temp/grid (5).jpeg',
                        title: '新店特惠',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (6).jpeg',
                        title: '准时达',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (7).jpeg',
                        title: '预订早餐',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (8).jpeg',
                        title: '土豪推荐',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (9).jpeg',
                        title: '川湘菜',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (10).jpeg',
                        title: '麻辣烫',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (11).jpeg',
                        title: '包子粥店',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (12).jpeg',
                        title: '鲜花蛋糕',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (13).jpeg',
                        title: '日韩料理',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (14).jpeg',
                        title: '果蔬生鲜',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (15).jpeg',
                        title: '汉堡薯条',
                        link: 'www.youdao.com'
                    },
                    {
                        imgUrl: '/static/temp/grid (16).jpeg',
                        title: '披萨意面',
                        link: 'www.youdao.com'
                    }
                ],
                cardBanner: {
                    imgUrl: '/static/temp/banner (1).png',
                    link: '12324124'
                },
                data: [
                    {
                        // 商品活动数据（刷新区）
                        title: '掌柜推荐',
                        type: 'scroll',
                        scroll: true,
                        link: '掌柜推荐',
                        good: [
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝香水菠萝香水菠萝香水菠萝1',
                                label: '特惠',
                                price: '9.9',
                                originalPrice: '45',
                                size: 99
                            },
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝2',
                                price: '9.9',
                                size: 1
                            },
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝香水菠萝香水菠萝香水菠萝3',
                                label: '折扣',
                                price: '9.9',
                                originalPrice: '45',
                                size: 0
                            },
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝4',
                                price: '9.9',
                                size: 0
                            },
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝5',
                                price: '9.9',
                                size: 0
                            },
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝',
                                price: '9.9',
                                size: 0
                            },
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝',
                                helper: '折扣',
                                price: '9.9',
                                originalPrice: '45',
                                size: 0
                            }
                        ]
                    },{
                        title: '限时抢购',
                        type: 'time',
                        helper: '2019-04-15 00:00:00',
                        link: '限时抢购',
                        good: [
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                                titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                                sku: [{name:'300/g 每盒'},{name:'300/g 每盒'}],
                                helper: '抢购',
                                price: '9.9',
                                originalPrice: '45',
                                size: 0
                            }
                        ]
                    },{
                        title: '人气商品',
                        type: 'hot',
                        helper: '本月销量TOP',
                        link: '人气商品',
                        good: [
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                                titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                                sku: [{name:'300/g 每盒'}],
                                helper: '抢购',
                                price: '9.9',
                                originalPrice: '45',
                                size: 0
                            }
                        ]
                    },{
                        title: '女神节',
                        type: 'sub',
                        helper: '女神节让爱锦上添花',
                        link: '女神节',
                        good: [
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                                titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                                sku: [{name:'300/g 每盒'}],
                                helper: '抢购',
                                price: '9.9',
                                originalPrice: '45',
                                size: 0
                            }
                        ]
                    },{
                        title: '特价专区',
                        type: 'default',
                        link: '特价专区',
                        good: [
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                                titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝香水菠萝',
                                sku: [{name:'300/g 每盒'}],
                                helper: '抢购',
                                price: '9.9',
                                originalPrice: '45',
                                size: 0
                            }
                        ]
                    }
                ]
            };
        },
        computed: {
            resSwiperData: function() {
                let obj = [];
                for (let item of this.swiperData) {
                    obj.push(item.imgUrl);
                }
                return obj;
            }
        },
        methods: {
            swiperBannerClick: function(index) {
                console.log(this.swiperData[index].link);
            },
            gridScorllClick: function(index) {
                console.log(this.gridData[index].link);
            },
            clickGoto: function(link) {
                uni.navigateTo({
                    url: link
                });
            },
            _clickListGood: function(index, type){
                console.log(index+":"+type)
            },
            _changeListGood: function(value, index){
                this.data[index[0]].good[index[1]].size = value;
            },
        }
    };
</script>

<style lang="scss">
@import '@/style/page/flex.scss';
@import '@/style/page/img-banner.scss';
@import '@/style/page/card.scss';

.scrollContent {
    padding: 0 24upx;
}

.scrollH{
    
    &__main{
        display: flex;
    }
}
</style>
